<!--
  * @Description: 组件-顶部导航栏
  * @Author: rcc
  * @Date: 2024-08-22 12:00:30
  * @FilePath: /rc-recruitment/components/navigation.vue
-->

<template>
  <view class="navigation">
    <view class="fixed-view flex" :style="fixedStyle">
      <image
        class="back"
        :src="backIcon"
        @click="clickBack" />
      <view class="title" :style="titleStyle">{{ title }}</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
	/**
	*
	* @description 自定义导航栏
	* @property {string} title - 导航标题
	* @property {string} color - 字体颜色（默认：#000）
	* @property {string} iconColor - 字体颜色（默认：white）
	* @property {string} bgColor - 导航背景颜色（默认：#fff）
	* @property {boolean} border - 是否显示底部边框（默认：false）
	*/

  import { computed } from 'vue'
  import type { StyleValue } from 'vue'

  import backBlack from '@/static/images/public/back-black.png'
  import backWhite from '@/static/images/public/back-white.png'

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#000',
    },
    iconColor: {
      type: String,
      default: 'black',
    },
    bgColor: {
      type: String,
      default: '#fff',
    },
    border: {
      type: Boolean,
      default: false,
    },
  })

  const backIcon = computed(() => {
    if (props.iconColor === 'white') {
      return backWhite
    } else {
      return backBlack
    }
  })

  const fixedStyle = computed(() => {
    const styles : StyleValue = { 'background-color': props.bgColor }

    if (props.border) {
      styles['border-bottom'] = '1rpx solid #E9E9E9'
    }

    return styles
  })

  const titleStyle = computed(() => {
    const styles : StyleValue = { color: props.color }

    return styles
  })

  const clickBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
	$status-bar-height: var(--status-bar-height);
	$height: calc($status-bar-height + 44px);

	.navigation {
		height: $height;
	}

	.fixed-view {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		height: $height;
		padding-top: $status-bar-height;

		.back {
			width: 80rpx;
			height: 80rpx;
			padding: 22rpx;
		}

		.title {
			margin-left: 10rpx;
			color: #000;
			font-size: 34rpx;
			font-weight: bold;
		}
	}
</style>
